<!-- 分享 -->
<template>
	<view class="share">
		<view class="home-main">
			<!-- <image src="/static/images/logo.png" class="home-logo" mode=""></image> -->
			<view class="home-main-top">
				<view class="home-main-top-name flex-start">
					<text>申请人</text>
					<view class="">
						{{list.userName}}
					</view>
				</view>
				<view class="home-main-top-type flex-start">
					<text>申请类型</text>
					<view class="">
						{{list.visitType == 1?'病假':list.visitType == 2?'事件':list.visitType == 3?'其它':list.visitType == 4?'公务来访':'私人来访'}}
					</view>
				</view>
				<view class="home-main-top-type flex-start">
					<text>申请标题</text>
					<view class="">
						{{list.applyName}}
					</view>
				</view>
				<!-- <view class="home-main-top-type flex-start">
					<text>编号</text>
					<view class="">
						F107839
					</view>
				</view> -->
			</view>
			<view class="home-main-bottom">
				<view class="home-main-bottom-li">
					<text>手机号：</text>
					<view>{{list.userPhone || '未填写'}}</view>
				</view>
				<view class="home-main-bottom-li">
					<text>被访人：</text>
					<view>{{list.forUserName}}</view>
				</view>
				<view class="home-main-bottom-li">
					<text>被访人电话：</text>
					<view>{{list.forUserPhone}}</view>
				</view>

				<view class="home-main-bottom-li">
					<text>学院：</text>
					<view>{{list.forDeptName}}</view>
				</view>
				<view class="home-main-bottom-li">
					<text>申请理由：</text>
					<view>{{list.applyReason}}</view>
				</view>
				<view class="home-main-bottom-li">
					<text>离校时间：</text>
					<view>{{list.endDate}}</view>
				</view>
				<view class="home-main-bottom-li">
					<text>回校时间：</text>
					<view>{{list.startDate}}</view>
				</view>
				<view class="home-main-bottom-li">
					<text>申请时间：</text>
					<view>{{list.createTime}}</view>
				</view>
				<view class="home-main-bottom-li">
					<text>申请状态：</text>
					<view>{{list.applyStatus == 1?'申请中':list.applyStatus == 2?'审批中':list.applyStatus == 3?'申请通过':'已拒绝'}}
					</view>
				</view>
				<!-- <view class="home-main-bottom-li">
					<text>车辆：</text>
					<view>1</view>
				</view> -->
			</view>
			<view class="" style="margin-top: 26rpx;" v-if="list.attacheds.length != 0">
				<view class="home-main-s-t">
					随行人员
				</view>
				<view class="" v-for="(item,index) in list.attacheds" :key="index">
					<view class="home-main-l flex-start">
						<text>随行人员：</text>
						<view>{{item.attachedName}}</view>
					</view>
					<view class="home-main-l flex-start">
						<text>随行人手机号：{{item.attachedPhone}}</text>
					</view>
					<!-- 附件 -->
					<!-- 附件 -->
					<view class="home-main-l flex-start">
						<text>随行材料：</text>
					</view>
					<view class="flex-wrap imagesList">
						<view class="images" v-for="(item1,index1) in item.attached" :key="index1">
							<image :src="item1" mode=""></image>
						</view>
					</view>
				</view>
			</view>

			<view class="apply-main" v-if="showPhoto">
				<view class="flex-start apply-main-title border">
					<image src="/static/images/campu-9.png" mode=""></image>
					<text>随行材料</text>
				</view>
				<view class="apply-main-updata flex">
					<view class="apply-main-updata-right" @click="getImg(1,1)">
						<image :src="img1.url?img1.url:'/static/images/campu-5.png'" mode=""></image>
						<view>上传身份证正面照</view>
					</view>
					<view class="apply-main-updata-right" @click="getImg(1,2)">
						<image :src="img2.url?img2.url:'/static/images/campu-7.png'" mode=""></image>
						<view>上传身份证反面照</view>
					</view>
				</view>
				<view style="padding-top: 20rpx;">上传材料(健康码、核酸检测报告、行程卡)</view>
				<view class="apply-main-updata-list flex-wrap">
					<view class="apply-main-updata-list-li" v-for="(item,index) in base.attaches" :key="index"
						v-if="item.code == 3">
						<image class="del" src="/static/images/del.png" mode="" @click="del(item)"></image>
						<image :src="item.url" mode="aspectFill"></image>
					</view>
					<image src="/static/images/add-img.png" mode="" @click="getImg(1,3)"></image>
				</view>
			</view>
			<view class="apply-main" v-if="showPhoto">
				<view class="flex-start apply-main-title border">
					<image src="/static/images/tabbar-shen1.png" mode=""></image>
					<text>人脸识别</text>
				</view>
				<view class="apply-main-rela">
					<image :src="img3.url?img3.url:'/static/images/campu-6.png'" mode="aspectFill"></image>
					<view class="" @click="getImg(1,4)">
						上传人脸
					</view>
				</view>

			</view>
			<view class="apply-btn" @click="getAttached()">
				提交
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applyId: null,
				img1: {
					url: ''
				},
				showPhoto:false,
				list: {
					applyName: "", //申请名称
					applyReason: "", //申请理由
					type: "", //申请离校,01来访,02出校
					forDeptName: "", //如果是出校,是自己的班级或者学院,如果是来访,就是来访人的学院或者班级
					forDeptId: 120, //学院或者班级Id
					forUserPhone: "", //被访人电话
					forUserId: null, //被访人Id
					forUserName: "", //被访人姓名
					userName: "", //申请人姓名
					userPhone: "", //申请人电话
					visitType: "", //1病假,2事假, 3其他 4 公务来访 5私人来访
					startDate: "", //进入校园时间
					endDate: "", //离开校园时间
					createTime: "", //申请时间
					days: null, //天数
					applyStatus: "",
					cars: null, //车牌号
					certificates: {
						font: "", //证件正面
						back: "" //正面背面
					}, //证件
					attachList: [
					], //附件列表
					attacheds: [], //随从人员列表
					approveNodeList: [{
						name: "", //审批节点名称
						state: "", //审批操作
						comment: "", //审批时备注信息
						username: "" //审批人
					}]
				},
				img2: {
					url: ''
				},
				img3: {
					url: ''
				},
				base: {
					attachedName: '',
					attachedPhone: '',
					applyId: '',
					attaches: [],
				}
			}
		},
		onLoad(option) {
			this.showPhoto = this.$db.get('showPhoto')
			let pages = getCurrentPages()
			console.log(pages)
			
			if (option.applyId) {
				this.base.applyId = option.applyId
				this.$api.detail({data:{applyId:option.applyId}}).then(res => {
					this.list = res.data
				}).catch(res => {})
			}
			// 获取用户的code，验证是否是新用户
			this.getUserInfo()
			// 获取详情
			
		},
		watch: {
			'base.attaches'(e) {
				e.forEach(item => {
					if (item.code == 1) {
						this.img1 = item
					} else if (item.code == 2) {
						this.img2 = item
					} else if (item.code == 4) {
						this.img3 = item
					}
				})
			}
		},
		methods: {
			del(item) {
				// console.log(item)
				// console.log(this.base.attaches.indexOf(item.attachId))

				this.base.attaches.forEach((arr, index) => {
					if (arr.attachId == item.attachId) {
						this.base.attaches.splice(index, 1)
					}
				})
				// console.log(this.base.attaches)
			},
			getUserInfo() {
				let _this = this
				// uni.navigateTo({
				// 	url:'../register/index'
				// })
				// return

				// 获取用户信息
				uni.getUserInfo({
					// 获取信息成功
					success(res) {
						// 成功后进行登录,获取code
						uni.login({
							success(res1) {
								if (res1.code) {
									let data = {
										js_code: res1.code
									}
									//发起网络请求
									_this.$api.verifyCode({
										data: data
									}).then(res2 => {
										_this.$db.set('info', res2.data)
										_this.$db.set('authorization', res2.data.authorization)
									}).catch(res2 => {
										/* 新人员 */
										_this.$db.set('share', true)
										_this.$db.set('isregister', false)
										_this.$db.set('applyId', _this.base.applyId)
										_this.$db.set('authorization', res2.data.data
											.authorization)
										_this.$uTips('没有查询到您的用户信息，请前往注册！')
										if (res2.data.code == '10') {
											setTimeout(res2 => {
												uni.reLaunch({
													url: 'authorization/index'
												})
											}, 1500)
										}

									})

								} else {
									console.log('登录失败！' + res.errMsg)
								}
							}
						})
					},
					fail() {
						console.log("获取用户信息失败");
					}
				})


			},
			// 接口不明确需要根据api修改
			getAttached() {
				let _this = this
				let data = this.base
				this.$api.getAttached({
					data
				}).then(rs => {
					_this.$uTips('提交成功!', 'success')
					uni.redirectTo({
						url: 'authorization/index'
					})
				}).catch(res => {
					let err = ''
					if (res.data) {
						err = res.data.data[0]
					}
					_this.$uTips(res.data.message + err)
				})
			},

			showtoast(title, type) {
				this.$refs.uTips.show({
					title: title,
					type: type,
					duration: '2300'
				})
			},
			getImg(num, code) {
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: code == 4 ? ['camera'] : ['album', 'camera'], //从相册选择
					success: function(imgRes) {
						uni.uploadFile({
							url: 'https://xmcr.nngyun.cn/WisdomSchool/api/common/attach/upload',
							filePath: imgRes.tempFiles[0].path,
							name: 'file',
							formData: {
								code: code,
								file: imgRes.tempFiles[0].path
							},
							header: {
								'Authorization': _this.$db.get('authorization'),
							},
							success: result => {
								let dataBase = JSON.parse(result.data)
								if (_this.base.attaches.length == 0) {
									// dataBase.data.attachId = ''
									_this.base.attaches.push(dataBase.data)
								} else {
									let a = ''
									_this.base.attaches.forEach((items, index) => {
										if (Number(items.code) == code && code != 3) {
											a = code
											items.url = dataBase.data.url
										} else if (_this.base.attaches.length - 1 ==
											index) {
											if (!a || code == 3) {
												_this.base.attaches.push(dataBase.data)
											}
											// dataBase.data.attachId = ''
											console.log(_this.base.attaches)
										} else {
											console.log('123')
										}
									})
								}
								_this.showtoast('文件上传成功!', 'success')
								console.log(_this.base.attaches);
							}

						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.home-main {
		position: relative;
		// margin-top: 20rpx;
		border-radius: 12rpx;
		background-color: white;
		padding: 68rpx 42rpx 42rpx;
	}

	.home-logo {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		position: absolute;
		right: 50%;
		top: -80rpx;
		margin-right: -80rpx;
		border: 2rpx solid #fff;
	}

	.home-main-top {
		border-bottom: 2rpx solid #979797;

		.home-main-top-name {
			margin-bottom: 30rpx;

			text {
				color: #4D7CFB;
				font-size: 34rpx;
				margin-right: 20rpx;
			}

			view {
				color: #3B3B3B;
				font-size: 28rpx;

			}
		}

		.home-main-top-type {
			margin-bottom: 30rpx;

			text {
				color: #797B87;
				font-size: 28rpx;
				margin-right: 20rpx;
			}

			view {
				color: #3B3B3B;

			}
		}
	}

	.apply-main-li {
		padding: 30rpx 0;

		text {
			width: 228rpx;
			color: #797B87;
			display: block;
			font-size: 28rpx;
		}


		input {
			flex: 1;
			color: #B1B1B1;
			font-size: 28rpx;
		}
	}

	.apply-main {
		// margin: 28rpx;
		overflow: hidden;
		// padding: 0 32rpx;
		border-radius: 12rpx;
		background-color: white;

		.apply-main-title {
			padding: 28rpx 0;

			image {
				width: 28rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}

		.apply-main-li {
			padding: 30rpx 0;

			text {
				width: 228rpx;
				color: #797B87;
				display: block;
				font-size: 28rpx;
			}

			input {
				color: #B1B1B1;
				font-size: 28rpx;
			}
		}

		.apply-textarea {
			// height: 250rpx;
			padding: 22rpx 30rpx;
			border-radius: 12rpx;
			margin-bottom: 36rpx;
			background-color: #F3F3F3;

			textarea {
				width: 100%;
				height: 176rpx;
				font-size: 30rpx;
			}

			view {
				color: #B1B1B1;
				font-size: 28rpx;
				text-align: right;
			}
		}
	}

	.apply-main-updata-list {
		padding: 20rpx 0;

		image {
			width: 170rpx;
			height: 170rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}

		.apply-main-updata-list-li {
			position: relative;

			.del {
				z-index: 10;
				position: absolute;
				right: -15rpx;
				top: -15rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		&::after {
			content: '';
			flex: 1;
		}
	}

	.apply-main-updata {
		border-bottom: 2rpx solid #979797;

		.apply-main-updata-right {
			margin: 58rpx 0;

		}

		image {
			width: 264rpx;
			height: 164rpx;

		}

		view {
			color: #797B87;
			font-size: 26rpx;
			margin-top: 20rpx;
			text-align: center;
		}
	}

	.apply-btn {
		color: #fff;
		margin: 0 56rpx;
		padding: 26rpx 0;
		text-align: center;
		margin-bottom: 50rpx;
		border-radius: 100rpx;
		background-color: #4D7CFB;
	}

	.apply-main-rela {
		padding-bottom: 44rpx;

		image {
			width: 222rpx;
			height: 258rpx;
			display: block;
			margin: 0 auto;
		}

		view {
			width: 360rpx;
			color: #4D7CFB;
			margin: 0 auto;
			padding: 26rpx 0;
			margin-top: 24rpx;
			text-align: center;
			border-radius: 100rpx;
			border: 2rpx solid #4D7CFB;
		}
	}
	.home-main-bottom {
		margin-top: 36rpx;
		.home-main-bottom-li {
			display: flex;
			font-size: 28rpx;
			margin-bottom: 36rpx;
			justify-content: flex-start;
			view:  {
				color: #3B3B3B;
				
			}
			text {
				color: #797B87;
			}
			
		}
	}
	.home-main-s-t {
		color: #4D7CFB;
		font-size: 34rpx;
		font-weight: bold;
		padding-bottom: 15rpx;
		margin-bottom: 10rpx;
		border-bottom: 2px solid #F3F3F3; 
	}
	.imagesList {
		&::after{
			content: '';
			width: 200rpx;
		}
	}
	.images {
		padding: 20rpx 0;
		image{
			width: 200rpx;
			height: 120rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
		}
	}
	.home-main-l {
		font-size: 28rpx;
		padding-bottom: 16rpx;
		text  {
			
			color: #797B87;
			
			
		}
		view {
			color: #3B3B3B;
		}
	}
</style>
